import { Col, Loading, Row, SearchBar } from '@nutui/nutui-react-taro'
import { ScrollView, View } from '@tarojs/components'
import { useMemo } from 'react'
import { useRequest } from 'taro-hooks'
import Layout from '../../components/layout'
import ProductInfoCard from '../../components/product-info-card'
import { useNavigation } from '../../hooks/useNavigation'
import { getCaseList } from '../../services/home'
import './index.less'

const Search = () => {
  const { navigateTo } = useNavigation()
  const { data: caseList, loading } = useRequest(getCaseList)

  const featuredCases = useMemo(() => {
    return (
      caseList?.cases.map((item) => ({
        id: item.product.id,
        title: item.title,
        subtitle: item.product.name,
        image: item.image[0] || '',
      })) || []
    )
  }, [caseList])

  const gotoProjectDetails = (id: string) => {
    navigateTo({
      url: '/pages/project-details/index',
      params: { id: id },
    })
  }

  return (
    <Layout title='搜索结果' showTabBar={false}>
      <SearchBar placeholder='搜索服务、案例或设计师' shape='round' className='mt-16 mb-16' />
      <ScrollView scrollY className='search-container'>
        <View className='center-container'>
          {loading ? (
            <Loading />
          ) : (
            <View className='pl-16 pr-16'>
              <Row gutter='10' style={{ gap: 10 }}>
                {featuredCases.map((caseItem) => (
                  <Col
                    span={12}
                    key={caseItem.id}
                    className='case-card'
                    onClick={() => gotoProjectDetails(caseItem.id + '')}>
                    <ProductInfoCard
                      key={caseItem.id}
                      image={caseItem.image}
                      title={caseItem.title}
                      subtitle={caseItem.subtitle}
                    />
                  </Col>
                ))}
              </Row>
            </View>
          )}
        </View>
      </ScrollView>
    </Layout>
  )
}

export default Search
